<script>
import Layout from "../../layouts/main";
import PageHeaderNew from "@/components/page-header-new";
import transactionTemplate from "./transactionTemplate";
/**
 * Dashboard component
 */
export default {
  components: {
    Layout,
    PageHeaderNew,
    transactionTemplate,
  },
  data() {
    return {
      items: [
        {
          text: '采集管理',
          url: '/spider'
        },{
          text: '采集模板',
          url: '/spider/managementTemplate'
        }
      ],
      // 运行环境
      sitetype: [
        {
          name: "全部",
          index: 1,
        },
        {
          name: "正式环境",
          index: 2,
        },
        {
          name: "测试环境",
          index: 3,
        }
      ],
      siteChange: 1,

      // 模板类型
      reptiletype: [
        {
          name: "全部",
          index: 1,
        },{
          name: "资讯",
          index: 2,
        },{
          name: "招标",
          index: 3,
        },{
          name: "工商",
          index: 4,
        },{
          name: "政策",
          index: 5,
        }
      ],
      reptileChange: 1,
    };
  },
  methods: {
    //站点筛选
    allSites(item) {
      this.siteChange = item.index;
    },
    // 爬虫类型
    reptile(item) {
      this.reptileChange = item.index;
    },
    // 创建采集模板
    addTem(){
      this.$router.push('/spider/createTemplate')
    },
  },
};
</script>

<template>
  <Layout>
    <PageHeaderNew :items="items" />
    <div>
      <div class="col-lg-12" style="padding: 0">
        <div class="card" style="margin-bottom: 0">
          <div class="card-body" style="margin-top: 0">
            <div class="all-products">
              <span>采集模板列表</span>
              <b-button @click="addTem" pill variant="dark">+创建数据采集模板</b-button>
            </div>
            <div class="states-type">
              <span class="type-title">运行环境:</span>
              <button
                type="button"
                class="btn btn-light rounded-pill btn-sm states-type-item"
                :class="{ isActive: siteChange == item.index }"
                v-for="item in sitetype"
                :key="item.index"
                @click="allSites(item)"
              >
                {{ item.name }}
              </button>
            </div>
            <div class="states-type">
              <span class="type-title">采集类型:</span>
              <button
                type="button"
                class="btn btn-light rounded-pill btn-sm states-type-item"
                :class="{ isActive: reptileChange == item.index }"
                v-for="item in reptiletype"
                :key="item.index"
                @click="reptile(item)"
              >
                {{ item.name }}
              </button>
            </div>
          </div>
        </div>
        <transactionTemplate />
      </div>
    </div>
  </Layout>
</template>
<style lang="scss" scoped>
.isActive {
  color: #fff;
  background-color: #5664d2;
}
.seedbody {
  margin-bottom: 0px;
}
// 走势图
.sparklines {
  margin-top: 20px;
  font-size: 15px;
}
.count {
  .title {
    font-size: 15px;
    font-weight: bold;
  }
  .zhankai {
    float: right;
    img {
      vertical-align: middle;
      width: 20px;
      padding-right: 10px;
    }
  }
}
.all-products {
  font-size: 15px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.states-type {
  margin-top: 20px;
  .type-title {
    display: inline-block;
    color: #74788d;
    padding-right: 10px;
  }
  .states-type-item {
    font-size: 12px;
    margin-left: 10px;
    padding-left: 15px;
    padding-right: 15px;
    min-width: 70px;
    &:hover {
      cursor: pointer;
    }
  }
}
.states-time {
  margin-top: 20px;
  .ad {
    float: right;
  }
  .time-title {
    display: inline-block;
    color: #74788d;
    padding-right: 10px;
  }
  .states-time-item {
    font-size: 12px;
    margin-left: 10px;
    padding-left: 8px;
    padding-right: 8px;
    min-width: 70px;
    &:hover {
      cursor: pointer;
    }
  }
}
.card-body {
  margin-top: 20px;
}
</style>